<template>
  <div id="EconomicCooperation">
    <div class="list-div" v-if="show">
      <ul class="list-ul">
        <li v-for="(item, index) in news_list" :key="'finacial_' + index">
           <router-link :to="{path:'/EconomicTrade/EconomicGain/NewsInfo', query:item}" class="news-link">
              <span v-html="item.title" :title="item.title"></span>
           </router-link>
           <span>【{{item.createDate | getTime}}】</span>
        </li>
      </ul>
    </div>
    <div class="pageInfo">
       <Page class="page-list" :total="countNum" show-total :current="curPageIndex" :page-size="pageSize" @on-change="changeHandle"></Page>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>

  import baseConfig from "../../publicLib/baseConfig/baseConfig";
  import {Storage} from '../../publicLib/utils-lib/main'

  let localStorage = new Storage('localStorage');

export default {
  name: "EconomicCooperation",
  data() {
    return {
     news_list:[],// baseConfig.jmtd.fileList,
      show: true,
      curPageIndex: 1,
      countPage: 10,
      countNum: 10,
      pageSize: 4,
      show: true
    }
  },
  filters: {
     getTime: function (value) {
        return value.split(' ')[0]
     }
  },
  watch: {
    $route(to, from) {
      if (to.name === 'EconomicCooperation') {
        this.show = true
      } else {
        this.show = false
      }

      // 缓存当前页
       localStorage.setItem('EconomicCooperationShow', this.show)
    }
  },
  methods: {
     getNewsList (index) {
        this.$fetch('newslist', {newstypes: '12',pageNo: index})
           .then(response => {
           //成功获取服务器数据
              if (response.code === "200") {
                let data = response.data;
                this.curPageIndex = data.pageNo;
                this.countPage = data.page_num;
                this.countNum = data.count;
                this.pageSize = data.pageSize;

                 this.news_list = [];
                 let ary = data.list;
                 let len = ary.length;

                 for (let i = 0; i < len; i++) {
                    this.news_list.push(ary[i]);
                 }
              }
           }
        )
     },
     /* 分页改变事件 */
     changeHandle (curIndex) {
        this.curPageIndex = curIndex;
        this.getNewsList(curIndex);
     }
  },
  mounted () {
      this.getNewsList(this.curPageIndex);
      /* 如果现实的是详情页面，刷新浏览器仍然显示详情页 */
      let show = localStorage.getItem('EconomicCooperationShow');

      if (show === 'false') {
        this.show = false;
      }
    },
    destroyed () {
        localStorage.removeItem('EconomicCooperationShow')
      }
}
</script>

<style lang="scss" scoped>

  @import 'publicLib/scss/defualtScss.scss';


  #EconomicCooperation{
       width: 100%;
       font-size: 1rem;

        .list-div{
          width: 95%;
          margin: 0 auto;
          text-align: left;
          font-size: 1rem;

          .list-ul{
            margin: 2rem 0;

            li{
              width: 90%;
              line-height: 2rem;
              border-bottom: #D6D6D6 0.09rem dashed;
              list-style-type: square;

              .news-link{
                span{
                  width: 80%;
                  display: block;
                  color: $data-detail-font-color;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  float: left;
                }
              }

              &:hover{
                cursor: pointer;

                span, a{
                  color: $default-layout-color;
                }
              }
            }

            span{
              float: right;
            }
          }
        }

       .pageInfo{
         .page-list{
           float: right;
           margin-right: 1rem;
         }
       }
     }
</style>
